<template>
  <section>
    <a-select
      placeholder="请选择省份"
      :id="`${id}_province`"
      v-model:value="formValue.province.code"
      @change="handleProvinceChange"
      style="width: 180px"
      allowClear
    >
      <a-select-option
        v-for="(item, idx) in provinceOpts"
        :key="idx"
        :value="item.code"
        :record="item"
        >{{ item.name }}</a-select-option
      >
    </a-select>

    <a-select
      :id="`${id}_city`"
      placeholder="请选择城市"
      v-model:value="formValue.city.code"
      style="width: 180px; margin-left: 10px"
      @change="handleCityChange"
      allowClear
    >
      <a-select-option
        v-for="(item, idx) in cityOpts"
        :key="idx"
        :value="item.code"
        :record="item"
        >{{ item.name }}</a-select-option
      >
    </a-select>

    <a-select
      :id="`${id}_country`"
      placeholder="请选择县区"
      v-model:value="formValue.country.code"
      style="width: 180px; margin-left: 10px"
      @change="handleCountryChange"
      allowClear
    >
      <a-select-option
        v-for="(item, idx) in countryOpts"
        :key="idx"
        :value="item.code"
        :record="item"
        >{{ item.name }}</a-select-option
      >
    </a-select>

    <a-select
      :id="`${id}_town`"
      placeholder="请选择镇"
      v-model:value="formValue.town.code"
      @change="handleTownChange"
      style="width: 180px; margin-left: 10px"
      allowClear
    >
      <a-select-option
        v-for="(item, idx) in townOpts"
        :key="idx"
        :value="item.code"
        :record="item"
        >{{ item.name }}</a-select-option
      >
    </a-select>

    <a-select
      :id="`${id}_village`"
      placeholder="请选择乡"
      v-model:value="formValue.village.code"
      @change="handleVillageChange"
      style="width: 180px; margin-left: 10px"
      allowClear
    >
      <a-select-option
        v-for="(item, idx) in villageOpts"
        :key="idx"
        :value="item.code"
        :record="item"
        >{{ item.name }}</a-select-option
      >
    </a-select>
  </section>
</template>
/**五级联动 **/
<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  onBeforeUnmount,
  defineEmits,
  watch,
} from "vue";
import { ReturnForm, getAreaCode, defaultValue } from "./index";
import ResultEnum from "@/config/ResultEnum";
import { message } from "ant-design-vue";
import { copyObjVal } from "@/utils/common";
import { PlusOutlined } from "@ant-design/icons-vue";

export default defineComponent({
  components: {
    PlusOutlined,
  },
  props: {
    id: {
      type: String || undefined,
      default: "",
    },
  },
  setup(props, context) {
    const defaultValues = () => {
      return defaultValue;
    };

    const formValue = reactive<ReturnForm>(defaultValues());

    const provinceOpts = ref([] as any);
    const cityOpts = ref([] as any);
    const countryOpts = ref([] as any);
    const townOpts = ref([] as any);
    const villageOpts = ref([] as any);

    onMounted(() => {
      getAreaCode({ pcode: "0" }).then((res: any) => {
        if (res.code == ResultEnum.SUCCESS_CODE) {
          provinceOpts.value = res.result;
        } else {
          message.error("省编码获取失败");
        }
      });
    });

    onBeforeUnmount(() => {});

    const init = (
      provinceCode: any,
      cityCode: any,
      countryCode: any,
      townCode: any,
      villageCode: any
    ) => {
      formValue.province.code = provinceCode;
      formValue.city.code = cityCode;
      formValue.country.code = countryCode;
      formValue.town.code = townCode;
      formValue.village.code = villageCode;
      initProvinceSelector();
    };

    const reset = (tx: string) => {
      return new Promise((resolve: any, reject: any) => {
        if (tx == "province") {
          cityOpts.value = [];
          countryOpts.value = [];
          townOpts.value = [];
          villageOpts.value = [];
          formValue.city = {
            code: "",
            name: "",
            pcode: "",
            level: "",
          };
          formValue.country = {
            code: "",
            name: "",
            pcode: "",
            level: "",
          };
          formValue.town = {
            code: "",
            name: "",
            pcode: "",
            level: "",
          };
          formValue.village = {
            code: "",
            name: "",
            pcode: "",
            level: "",
          };
        } else if (tx == "city") {
          countryOpts.value = [];
          townOpts.value = [];
          villageOpts.value = [];
          formValue.country = {
            code: "",
            name: "",
            pcode: "",
            level: "",
          };
          formValue.town = {
            code: "",
            name: "",
            pcode: "",
            level: "",
          };
          formValue.village = {
            code: "",
            name: "",
            pcode: "",
            level: "",
          };
        } else if (tx == "country") {
          townOpts.value = [];
          villageOpts.value = [];
          formValue.town = {
            code: "",
            name: "",
            pcode: "",
            level: "",
          };
          formValue.village = {
            code: "",
            name: "",
            pcode: "",
            level: "",
          };
        } else if (tx == "town") {
          villageOpts.value = [];
          formValue.village = {
            code: "",
            name: "",
            pcode: "",
            level: "",
          };
        } else if (tx == "village") {
          //formValue.village = defaultVals.village;
        }
        resolve("ok");
      });
    };

    //省份选择改变
    const handleProvinceChange = (value: string, option: any) => {
      formValue.province.level = option.record.level;
      formValue.province.pcode = option.record.pcode;
      formValue.province.name = option.record.name;
      reset("province").then((res: any) => {
        //formValue.province = option.record;
        if (value == null || value == undefined) {
        } else {
          getAreaCode({ pcode: value }).then((res: any) => {
            if (res.code == ResultEnum.SUCCESS_CODE) {
              cityOpts.value = res.result;
            } else {
              message.error("城市编码获取失败");
            }
          });
        }
      });
    };

    //城市选择改变
    const handleCityChange = (value: string, option: any) => {
      formValue.city.level = option.record.level;
      formValue.city.pcode = option.record.pcode;
      formValue.city.name = option.record.name;
      reset("city").then((res: any) => {
        countryOpts.value = [];
        townOpts.value = [];
        villageOpts.value = [];
        if (value == null || value == undefined) {
        } else {
          getAreaCode({ pcode: value }).then((res: any) => {
            if (res.code == ResultEnum.SUCCESS_CODE) {
              countryOpts.value = res.result;
            } else {
              message.error("县区编码获取失败");
            }
          });
        }
      });
    };

    //县区选择改变
    const handleCountryChange = (value: string, option: any) => {
      formValue.country.level = option.record.level;
      formValue.country.pcode = option.record.pcode;
      formValue.country.name = option.record.name;
      reset("country").then((res: any) => {
        formValue.country = option.record;
        townOpts.value = [];
        villageOpts.value = [];
        if (value == null || value == undefined) {
        } else {
          getAreaCode({ pcode: value }).then((res: any) => {
            if (res.code == ResultEnum.SUCCESS_CODE) {
              townOpts.value = res.result;
            } else {
              message.error("镇编码获取失败");
            }
          });
        }
      });
    };

    //镇选择改变
    const handleTownChange = (value: string, option: any) => {
      formValue.town.level = option.record.level;
      formValue.town.pcode = option.record.pcode;
      formValue.town.name = option.record.name;
      reset("town").then((res: any) => {
        formValue.town = option.record;
        villageOpts.value = [];
        if (value == null || value == undefined) {
        } else {
          getAreaCode({ pcode: value }).then((res: any) => {
            if (res.code == ResultEnum.SUCCESS_CODE) {
              villageOpts.value = res.result;
            } else {
              message.error("村编码获取失败");
            }
          });
        }
      });
    };

    const handleVillageChange = (value: string, option: any) => {
      formValue.village.level = option.record.level;
      formValue.village.pcode = option.record.pcode;
      formValue.village.name = option.record.name;
      reset("village").then((res: any) => {
        formValue.village = option.record;
      });
    };

    //获取选择数据
    const getData = () => {
      return {
        province: formValue.province,
        city: formValue.city,
        country: formValue.country,
        town: formValue.town,
        village: formValue.village,
      };
    };

    //初始化省份下拉列表
    const initProvinceSelector = () => {
      getAreaCode({ pcode: "0" }).then((res: any) => {
        if (res.code == ResultEnum.SUCCESS_CODE) {
          provinceOpts.value = res.result;
          if (formValue.city.code) {
            initCitySelector();
          }
        } else {
          message.error("省编码获取失败");
        }
      });
    };

    //初始化城市下拉列表
    const initCitySelector = () => {
      getAreaCode({ pcode: formValue.province.code }).then((res: any) => {
        if (res.code == ResultEnum.SUCCESS_CODE) {
          cityOpts.value = res.result;
          if (formValue.country.code) {
            initCountrySelector();
          }
        } else {
          message.error("市编码获取失败");
        }
      });
    };

    //初始化县区下拉列表
    const initCountrySelector = () => {
      getAreaCode({ pcode: formValue.city.code }).then((res: any) => {
        if (res.code == ResultEnum.SUCCESS_CODE) {
          countryOpts.value = res.result;
          if (formValue.town.code) {
            initTownSelector();
          }
        } else {
          message.error("县区编码获取失败");
        }
      });
    };

    //初始化镇下拉列表
    const initTownSelector = () => {
      getAreaCode({ pcode: formValue.country.code }).then((res: any) => {
        if (res.code == ResultEnum.SUCCESS_CODE) {
          townOpts.value = res.result;
          if (formValue.village.code) {
            initVillageSelector();
          }
        } else {
          message.error("镇编码获取失败");
        }
      });
    };

    //初始化村下拉列表
    const initVillageSelector = () => {
      getAreaCode({ pcode: formValue.town.code }).then((res: any) => {
        if (res.code == ResultEnum.SUCCESS_CODE) {
          villageOpts.value = res.result;
        } else {
          message.error("村编码获取失败");
        }
      });
    };

    //返回数据
    return {
      getData,
      formValue,
      provinceOpts,
      cityOpts,
      countryOpts,
      townOpts,
      villageOpts,
      handleProvinceChange,
      handleCityChange,
      handleCountryChange,
      handleTownChange,
      handleVillageChange,
      init,
    };
  },
});
</script>
